<template>
	<view>
		<view class="header">
			<view class="target">
				<image mode="widthFix" :src="`${imgsrc}/img/app/pre_sale_banner.jpg`"></image>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-info"  v-for="(item,index) in productList" :key="index">
				<view class="img" v-if="item.id" @tap="toGoods(item)" >
					<image mode="aspectFit" :src="imgsrc + item.home_pic"></image>
				</view>
				<view class="img" v-else>
					<image mode="aspectFit" :src="imgsrc + item.home_pic"></image>
					<view class="text">努力上架中...</view>
				</view>
				<view class="info">
					<view class="name">{{item.product_name}}</view>
					<view class="hot">超爆网红款</view>
				</view>
			</view>
			<!-- <view class="goods-info"  @tap="toGoods(item)" v-for="(item,index) in productList" :key="index">
				<view class="img">
					<image mode="aspectFit" :src="imgsrc + item.home_pic"></image>
				</view>
				<view class="info">
					<view class="name">{{item.product_name}}</view>
					<view class="hot">超爆网红款</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				imgsrc: Api.imgsrc,
				productList: []
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// console.log(option.cid); //打印出上个页面传递的参数。
			// this.category_id = option.cid;
			uni.setNavigationBarTitle({
				title: '预售专区'
			});
			this.loadData();
			// this.reload();
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(() => {
				// this.reload();
				// uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			this.pagenumber = this.pagenumber + 1;
		},
		methods: {
			async reload() {
				this.logining = true;
				var _this = this;
				
			},
			async loadData() {
				var params = {};
				let data = await Api.apiCall('post', Api.goods.preProductList, params);
				if (data) {
					
				   var item = {"product_id":0,"product_name":"望乡菠菜面","number_period":"","sort":100,"id":0,"name":"望乡菠菜面","pic":"/img/agent/lvyou/qicaiyunlan .png","home_pic":"/img/app/pre_product.jpg","price":"0.00","original_price":"3900.00","sale":3600,"stock":100,"spec_value":"5000g/箱"}
				   data.push(item);
				   this.productList = data;
				}
			},
			//商品跳转
			toGoods(e) {
				uni.navigateTo({
					url: '/mall/product/pre_saleArea?product_id='+ e.id
				});
			},
		}

	}
</script>

<style lang="scss">
	.icon {
		font-size: 26upx;
	}

	page {
		background-color: #fafafa;
	}

	.header {
		width: 100%;
		.target {
			width: 100%;
			z-index: 1;
			width: 100%;
			display: flex;
			justify-content: center;
			image {
				width: 100%;
			}
		}
	}

	.goods-list {
		width: 100%;
		margin-top: 38upx;
		display: flex;
		flex-wrap: wrap;
		.goods-info {
			width: 100%;
			margin-bottom: 20upx;
			background-color: #fff;
			box-shadow: 1upx ;
			box-shadow: 0upx 1upx 10upx #E3E7E3;
			.img {
				width: 100%;
				height: 350upx;
				position: relative;
				image {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 9;
				}
				.text{
					width: 100%;
					height: 350upx;
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					left: 0;
					font-size: $font-base + 24upx;
					color: #fff;
					background-color: rgba(0,0,0,.5);
					z-index: 10;
				}
			}
			.info {
				border-top: 1upx solid rgba(212, 212, 212,.4);
				width: 100%;
				box-sizing: border-box;
				padding: 0 30upx;
				font-size: 32upx;
				height: 100upx;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: center;
				.name {
					display: flex;
				}
				
				.hot {

					display: inline-flex;
					font-size: 24upx;
				}
			}
		}

	}
</style>
